<template>
  <view>
    <view class="long-data"></view>
    <view class="long-data-picker" :style="'display:' + [isShow ? 'block' : 'none']">
      <picker-view :indicator-style="itemHeight" :value="dateValues" @change="bindDateChange">
        <picker-view-column>
          <view class="long-datetime-item" v-for="(item, index) in dateObj.dates" :key="index">{{ item }}</view>
        </picker-view-column>

        <picker-view-column>
          <view class="long-datetime-item" v-for="(item, index) in dateObj.hours" :key="index">{{ item }}时</view>
        </picker-view-column>

        <picker-view-column>
          <view class="long-datetime-item" v-for="(item, index) in dateObj.minutes" :key="index">{{ item }}分</view>
        </picker-view-column>
      </picker-view>
    </view>
    <!-- <view class="text-center flex-middle center mt-30">
			<u-checkbox-group >
				<u-checkbox v-model="checkedTime" v-if="show" shape="circle" active-color="#FF8823">随时可走</u-checkbox>
				<u-checkbox v-model="checkedTime1" v-else shape="circle" active-color="#FF8823">前后1个小时</u-checkbox>
			</u-checkbox-group>
		</view> -->
  </view>
</template>

<script>
export default {
  name: 'long-date',
  props: {
    openStatus: {
      //是否展开状态
      type: Boolean,
      default() {
        return false; //默认不展开
      }
    },

    type: {
      //模式
      type: String,
      default() {
        // return 'between' //根据开始时间和结束模式获取
        return 'day'; //以天数获取开始时间模式
      }
    },
    getDayNum: {
      //获取天数（day模式可用）
      type: Number,
      default() {
        return 7;
      }
    },
    chooesMaxDay: {
      //是否设置最大选择天数 （day模式可用）
      type: Number,
      default() {
        return 0; // 0 默认不设置  >0代表天数
      }
    },

    startTime: {
      //开始时间（between模式可用）
      type: String,
      default() {
        return '';
      }
    },

    endTime: {
      //结束时间（between模式可用）
      type: String,
      default() {
        return '';
      }
    }
  },

  data() {
    return {
      index: 0, //是否改变日期
      index1: 0, //是否改变小时
      index2: 0, //是否改变分钟
      chooesDate: '',
      year: '',
      month: '',
      day: '',
      hour: '',
      minute: '',
      month1: '',
      // second,
      dateObj: '',
      checkStr: '出发时间不能小于当前时间',
      showCheck: false,
      isShow: this.openStatus,
      selectRes: '',
      itemHeight: `height: ${uni.upx2px(88)}px;`,
      dateValues: [0, 0, 0],

      checkedTime: true,
      checkedTime1: true,
      show: true
    };
  },

  computed: {
    //获取几天后的描述
    // desc: function() {
    // 	let chooes_time = new Date(this.chooesDate.toLocaleDateString())
    // 	// var chooes_time = Date.parse(new Date('2019-10-30 10:00:00')) / 1000
    // 	let now_time = new Date(new Date().toLocaleDateString())
    // 	//获取多少秒
    // 	let haveSecond = (chooes_time - now_time) / 86400000;
    // 	if (haveSecond == 0) {
    // 		return '今天'
    // 	} else if (haveSecond == 1) {
    // 		return '明天'
    // 	} else if (haveSecond == 2) {
    // 		return '后天'
    // 	} else if (haveSecond == 3) {
    // 		return '3天后'
    // 	} else if (haveSecond == 4) {
    // 		return '4天后'
    // 	} else if (haveSecond == 5) {
    // 		return '5天后'
    // 	} else if (haveSecond == 6) {
    // 		return '6天后'
    // 	} else if (haveSecond == 7) {
    // 		return '一周后'
    // 	}
    // },
    //获取星期几
    // week: function() {
    // 	let week = this.chooesDate.getDay()
    // 	switch (week) {
    // 		case 1:
    // 			return '周一'
    // 			break;
    // 		case 2:
    // 			return '周二'
    // 			break;
    // 		case 3:
    // 			return '周三'
    // 			break;
    // 		case 4:
    // 			return '周四'
    // 			break;
    // 		case 5:
    // 			return '周五'
    // 			break;
    // 		case 6:
    // 			return '周六'
    // 			break;
    // 		case 0:
    // 			return '周日'
    // 			break;
    // 	}
    // },
  },
  mounted() {
    this.initDate();
  },
  methods: {
    //初始化时间
    initDate(numchange) {
      const that = this;
      switch (this.type) {
        case 'between':
          //获取开始时间
          var startDate = new Date(this.startTime + ' 00:00:00');

          //获取结束时间
          var endDate = new Date(this.endTime + ' 00:00:00');

          //设置默认选择时间
          this.chooesDate = new Date(this.startTime + ' 00:00:00');

          //获取多少天日期
          var num = (endDate - startDate) / 86400000;

          break;

        case 'day':
          //获取当前时间
          var startDate = new Date();

          //设置默认选择时间
          this.chooesDate = new Date();

          //获取多少天日期
          var num = this.getDayNum;

          break;
      }

      //获取年份
      let year = this.chooesDate.getFullYear();

      //获取月份
      let month = this.chooesDate.getMonth() + 1;

      //获取当前日(1-31)
      let day = this.chooesDate.getDate();

      //获取当前的小时 并格式化1-10数字
      let h = this.chooesDate.getHours();
      // let hour = h < 10 ? '0' + h : h
      let hour = h;
      // console.log(hour);

      //获取当前的分钟数 并格式化1-10数字
      let m = this.chooesDate.getMinutes();
      let minute = m < 10 ? '0' + m : m;

      let minTwo = minute.toString().substr(-1, 1);

      //设置日期数组
      let dates = [];
      let dates1 = [];

      //设置小时数数组
      let hours = [];

      //设置分钟数数组
      let minutes = [];

      let str_minute;
      let str_hour;

      if (this.index != 0) {
        // 滚动日期时
        str_hour = 0;
        str_minute = 0;
      } else {
        if (Number(minute.toString().substr(-2, 1)) + 1 > 5) {
          if (this.index1 != 0) {
            str_minute = 0;
          } else {
            if (hour + 1 > 23) {
              str_hour = 0;
              that.index = 1;
              str_minute = Number(minute.toString().substr(-2, 1)) - 1;
            } else {
              str_hour = hour + 1;
              str_minute = Number(minute.toString().substr(-2, 1)) - 1;
            }
          }
        } else {
          if (that.index1 != 0) {
            str_minute = 0;
          } else {
            if (hour + 1 > 23) {
              str_hour = 0;
              that.index = 1;
              str_minute = Number(minute.toString().substr(-2, 1)) - 1;
            } else {
              str_hour = hour;
              str_minute = Number(minute.toString().substr(-2, 1)) + 1;
            }
          }
        }
      }

      for (let i = str_minute; i < 6; i++) {
        let str = i;
        str = str + '0';
        minutes.push(str);
      }

      for (let i = str_hour; i < 24; i++) {
        let str = i;
        if (i < 10) {
          str = '0' + str;
        } else {
          str = '' + str;
        }
        hours.push(str);
      }
      // console.log(hours,"小时社会化");
      for (let i = 0; i <= num; i++) {
        //获取包括的日期
        if (i != 0) {
          startDate.setDate(startDate.getDate() + 1);
        }

        let str_year = startDate.getFullYear();
        let str_month = startDate.getMonth() * 1 + 1;
        let str_day;

        if (this.index == 0) {
          str_day = startDate.getDate();
        } else {
          str_day = startDate.getDate();
        }

        if (str_month < 10) {
          str_month = '0' + str_month;
        }

        if (str_day < 10) {
          str_day = '0' + str_day;
        }

        // console.log(str_day,"天")

        dates.push(str_year + '-' + str_month + '-' + str_day);
      }

      let dateObj = {
        dates,
        hours,
        minutes
      };

      // console.log(numchange,"num值",that.index ,that.index1,that.index2, minutes)
      if (numchange == 1) {
        that.dateObj.minutes = minutes;
        if (that.index1 == 0) {
          // console.log("走着路")
          that.dateObj.hours = hours;
        }
      } else {
        that.dateObj = {
          dates,
          hours,
          minutes
        };
      }

      // this.dateObj = dateObj
      if (that.index == 0 && that.index1 == 0 && that.index2 == 0 && numchange == undefined) {
        // console.log('走这没');
        this.checkStr = '';
        this.selectRes = dates[0] + ' ' + hours[0] + ':' + minutes[0];
      }
      if (this.index1 != 0 || this.index2 != 0 || this.index != 0) {
        this.show = false;
      } else {
        this.show = true;
      }
    },

    //切换日期选择显示状态
    tapIsShow() {
      this.isShow = !this.isShow;
    },

    //滚动切换时间
    bindDateChange(e) {
      //有效日期的滚动日期时间方法
      // console.log(e, '/看看你');
      var num = 0;
      // console.log(this.index1, Number(e.detail.value[1]), '看看');
      if (this.index1 != Number(e.detail.value[1])) {
        num = 1;
        // console.log('不等/图')
      } else if (this.index2 != Number(e.detail.value[2])) {
        num = 1;
        // console.log('不等图看看000')
      }
      this.index = Number(e.detail.value[0]);
      this.index1 = Number(e.detail.value[1]);
      this.index2 = Number(e.detail.value[2]);
      this.initDate(num);

      let valueArr = e.detail.value;

      let dateStr = this.dateObj.dates[valueArr[0]];
      let hourStr = this.dateObj.hours[valueArr[1]];
      let minuteStr = this.dateObj.minutes[valueArr[2]];
      let chooes_time;

      chooes_time = new Date(dateStr.split('-')[0], (Number(dateStr.split('-')[1]) - 1).toString(), dateStr.split('-')[2], hourStr, minuteStr, '00');
      this.chooesDate = chooes_time;
      this.year = chooes_time.getFullYear();
      this.month = chooes_time.getMonth() + 1;
      this.day = chooes_time.getDate();

      let h = chooes_time.getHours();
      let m = chooes_time.getMinutes();
      this.hour = h < 10 ? '0' + h : h;
      this.minute = m < 10 ? '0' + m : m;

      let max_day = this.chooesMaxDay;
      if (max_day > 0 && this.type == 'day') {
        let haveSecond = chooes_time - new Date();

        if (haveSecond < 0) {
          this.checkStr = '出发时间不能小于当前时间';
          this.showCheck = true;
        } else {
          if (haveSecond / 86400000 > max_day) {
            this.checkStr = '出发时间不能大于' + max_day + '天';
            this.showCheck = true;
          } else {
            this.checkStr = '';
            this.showCheck = false;
          }
        }
      }
      // this.year + '-' +
      this.selectRes = this.year + '-' + this.month + '-' + this.day + ' ' + this.hour + ':' + this.minute;
    },
    // 点击确定
    confirm() {
      //有效日期的滚动日期时间方法
      this.$emit('select', {
        time: this.selectRes,
        tip: this.checkStr
      });
    }
  }
};
</script>

<style>
.long-data {
  background: #ffffff;
}

.long-data-check {
  height: 40rpx;
  width: 100%;
  background: #e54d42;
  position: absolute;
  left: 0;
  top: 18rpx;
  color: #fff;
  line-height: 45rpx;
  border-radius: 0rpx;
  padding: 0px 20rpx;
  font-size: 28rpx;
  text-align: center;
  border-radius: 20rpx;
}

.long-data-check-triangle {
  width: 0;
  height: 0;
  border-top: 12rpx solid transparent;
  border-left: 10rpx solid #e54d42;
  border-bottom: 12rpx solid transparent;
  position: absolute;
  right: 223rpx;
  top: 26rpx;
}

.long-data-fl {
  float: left;
}

.long-data-fr {
  float: right;
}

.long-data-changeTime {
  position: relative;
  text-align: right;
  padding: 0rpx 30rpx;
}

.long-data-changeTimeIcon {
  color: #888;
}

.long-data-picker {
  width: 100%;
  height: 250rpx;
  overflow: hidden;
  background: #fff;
  transition: height 0.3s;
}

.long-datetime-item {
  text-align: center;
  width: 100%;
  height: 88upx;
  line-height: 88upx;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 30rpx;
}
/* .long-datetime-item{} */

.long-data-picker picker-view {
  height: 100%;
}
</style>
